<template>
    <div>send</div>
    <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    status-icon
    label-width="auto"
    class="demo-ruleForm"
  >
    <el-form-item label="文章标题" prop="pass">
      <el-input v-model="ruleForm.title" type="text" autocomplete="off" />
    </el-form-item>
    <el-form-item label="内容" prop="checkPass">
      <el-input
        v-model="ruleForm.content"
        type="text"
        autocomplete="off"
      />
    </el-form-item>
    是否公开
    <el-switch
          v-model="ruleForm.status"
          class="ml-2"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
      />
    <el-form-item>
      <el-button type="primary" @click="submit(ruleFormRef)">
        发布
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">重置</el-button>
    </el-form-item>
  </el-form>
</template>
<script setup>
import { reactive, ref } from 'vue'
import http from '../utils/http'
const ruleFormRef = ref()
const ruleForm = ref({
  title: '',
  content: '',
  status: false,
})
async function submit() {
    console.log(ruleForm.value);
    let r = await http({
        url: '/posts',
        method: 'post',
        data: {
            title: ruleForm.value.title,
            content: ruleForm.value.content,
            status: ruleForm.value.status
        }
    });
    console.log(r.data);
}
const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}


</script>
<style lang="">
    
</style>